{include file="public/header"}
<style scoped>
    .custom-collapse {
        margin-left: 19px;
        width: 335px;
      border: 1px solid #ebeef5;
      border-radius: 4px;
      margin-bottom: 20px;
    }
    
    .collapse-header {
      padding: 12px 15px;
    display: flex;
    justify-content: center; /* 水平居中 */
    align-items: center;     /* 垂直居中 */
      
    }

    </style>
{include file="public/style"}      

        <el-breadcrumb separator="/">
            <el-breadcrumb-item>首页</el-breadcrumb-item>
            <el-breadcrumb-item>物流管理</el-breadcrumb-item>
            <el-breadcrumb-item>费用测算</el-breadcrumb-item>
        </el-breadcrumb>
        <br>      
        <el-card  >
                <div  style="margin: 0 auto;width: 70%;  " >
                        
                    <el-tabs v-model="activeName" type="border-card"   @tab-click="handleClick" >
                        <el-tab-pane  label="运费测算"  name="fee">
                            <div class="collapse-header  fs-20">运费测算</div> 
                            <el-divider></el-divider>
                            <el-form :inline="true" :model="searchForm" size="small"  ref="refsearchForm" rules="isproviderules">                            
                                
                                <el-form-item label="国家" label-width="100px" prop="countrys">
                                    <el-select v-model="searchForm.countrys" clearable filterable placeholder="请选择国家"  >
                                        <el-option v-for="item in countrys" :key="item.countryid" :label="item.name" :value="item.countryid"></el-option>
                                    </el-select>
                                </el-form-item>
                                <div>
                                    <el-form-item prop="weight" label="重量单位(g)" label-width="100px" label-position="right">
                                        <el-input v-model="searchForm.weight"  placeholder="请输入重量单位(g)"clearable >                        
                                    </el-form-item>
                                </div>
                                 <!-- <div>
                                    <el-form-item prop="white" label="尺寸信息(cm)" label-width="100px" label-position="right">
                                        长 <el-input v-model="searchForm.length"  placeholder="请输入重量单位(g)"clearable style="width: 100px"> </el-input>x                      
                                        宽 <el-input v-model="searchForm.w"  placeholder="请输入重量单位(g)"clearable style="width: 100px"> </el-input> x  
                                        高 <el-input v-model="searchForm.white"  placeholder="请输入重量单位(g)"clearable style="width: 100px"></el-input>                      

                                    </el-form-item>
                                </div> -->
            
                                <el-form-item label-width="100px" style="margin-left: 100px;margin-top: 20px;">
                                    <el-button type="primary"  size="small" plain @click="getSearch" icon="el-icon-search" v-cloak>查询</el-button>
                                </el-form-item>          
                            </el-form>          
                            <div class="my-12" v-if="tablelist.length">                                 
                                <el-table :data="tablelist"   style="width: 100%;margin-bottom: 20px;"  row-key="id"  border   >                                            
                                    <el-table-column   prop="logistics_name" label="快递渠道名称" min-width="130"></el-table-column>  
                                    <el-table-column   prop="minweight" label="最低重量" min-width="130"></el-table-column>  
                                    <el-table-column   prop="maxweight" label="最高重量" min-width="130"></el-table-column>  
                                    <el-table-column    prop="weight_input"  label="	实重(g)" min-width="100"> </el-table-column>  
                                     <el-table-column    prop="fee"  label="运费总价(元)" min-width="100">
                                    </el-table-column>  
                                </el-table>
                            </div> 
                        </el-tab-pane> 
                         <el-tab-pane  label="产品售价测算"  name="price">

                         </el-tab-pane> 
                    </el-tabs> 
                </div>            
        </el-card>   
    </div>
    <script>
        new Vue({
            el: '#app',
            data: function () {
                return { 
                   activeName:'fee',//跳转
                   tablelist:[] ,              
                    searchForm: {                              
                        weight: '',                                             
                        countrys: '',  
                        type:'fee',
                    },
                    countrys:{$countrys|raw},//国家  
                    options:[],               
                    isproviderules: {
                        // prop: [
                        //     { required: true, message: '请选择快递渠道', trigger: 'change' },
                        // ],  
                        countrys: [
                            { required: true, message: '请选择国家', trigger: 'change' },
                        ],   
                         weight   : [
                            { required: true, message: '请输入重量', trigger: 'change' },
                        ],   
                        // account_password   : [
                        //     { required: true, message: '请输入服务密码', trigger: 'blur' },
                        // ],          
                    }                  
              
                    
                }
            },
            mounted(){        
               this.getCateList();
            },
            methods: {        

                async  getCateList(){
                   let loading = this.$loading({
                        lock: true,
                        text: '数据加载···',
                        spinner: 'el-icon-loading',
                        background: 'rgba(0, 0, 0, 0.7)'
                    });   
                  const res = await axios.post('/admin/products/product_list',{type:1})     
                   loading.close();
                   if (res.status !== 1) {
                      return  this.$message.error(res.info);             
                   }
                   this.options = res.info;
                },
                //运费计算
                async getSearch(){
                    this.$refs.refsearchForm.validate(async valid => {
                        if (!valid) {
                            return;
                        } else {
                            const res = await axios.post('/admin/logistics/freighttrial',{params:this.searchForm})                          
                            if (res.status !== 1) {
                                return this.$message.error(res.info);
                            }else{                 
                                console.log(res.info)            
                                this.tablelist = res.info;                                
                            }
                        }
                    });
                },
                async  getCategolist(row){ 
               
                   const res = await axios.post('/admin/Products/attribute_info',{catepubid:row})                         
                    if (res.status !== 1) {
                        return  this.$message.error(res.info);             
                    }  
                
                },
                 handleClick(tab, event) {
                    console.log(tab.name);
                    this.searchForm.type=tab.name
                   
                }, 
                       
            }
        })      
    </script> 
 </body> 
</html>
